<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/element-ui.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/jquery.md5.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="lib/element-ui.css"/>
    <link rel="stylesheet" type="text/css" href="css/register.css"/>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <title>方案解决系统</title>
</head>
<body>
<div id="app">
    <header>
        <div class="header">
            <div><a href="/"><img class="img-logo" src="lib/logo1.png" alt=""></a></div>
            <div class="plane-login">
                <div v-show="islogin==0">
                    <a href="#" @click="showLoginWindow=true">登录</a> | <a href="">注册</a>
                </div>
                <div v-show="islogin==1">
                    <el-menu :default-active="menuActiveIndex" class="el-menu-demo" mode="horizontal">
                        <el-submenu index="2">
                            <template slot="title"><img
                                    src="#" alt=""
                                    class="nav-avatar">{{userinfo.name}}
                            </template>
                            <el-menu-item index="2-1">个人中心</el-menu-item>
                            <el-menu-item index="2-2">设置</el-menu-item>
                            <el-menu-item index="2-3" @click="exit">退出登录</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </div>
            </div>
        </div>
    </header>
    <main>
        <div class="content">
            <div class="ask-title">
                <h1>注册用户</h1>
            </div>
            <div class="form-register">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="form.user"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pass">
                        <el-input type="password" v-model="form.pass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" v-model="form.pass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input type="password" v-model="form.mail" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码">
                        <img :src="yzimg" @click="imgcode" alt="">
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary">注册</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <transition name="el-zoom-in-center">
            <div class="window-plane-login" v-show="showLoginWindow">
                <div class="box-mask"></div>
                <div class="box-login">
                    <div class="plane-login-title">
                        <div><b>登录账户</b></div>
                        <div @click="closeLoginPlane"><i class="el-icon-close close"></i></div>
                    </div>
                    <div class="box-login-form">
                        <div class="form-item">
                            <el-input v-model="form.user" placeholder="账号"></el-input>
                        </div>

                        <div class="form-item">
                            <el-input v-model="form.pass" placeholder="密码" show-password></el-input>
                        </div>
                        <div class="form-item form-set-right">
                            <a href="#">忘记密码</a> | <a href="#">无法登录</a>
                        </div>
                        <div class="form-item form-set-right">
                            <el-button type="primary" @click="login">登录</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </main>
    <footer class="fixed-bottom">
        <div class="plane-footer">
            方案解决系统 code by XDwanj
        </div>
    </footer>
    <script>

      (function ($) {
        $.getUrlParam = function (name) {
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
          var r = window.location.search.substr(1).match(reg);
          if (r != null) return unescape(r[2]);
          return null;
        }
      })(jQuery);
      var vue = new Vue({
        el: '#app',
        mounted() {
          this.init()
        },
        data: {
          asklist: [],
          askData: {},
          yzimg: 'https://urp.tfswufe.edu.cn/cas/captcha.jpg',
          form: {
            user: '',
            pass: '',
            mail: ''
          },
          menuActiveIndex: 1,
          islogin: 0,
          userinfo: {
            name: ''
          },
          showLoginWindow: false
        },
        methods: {
          init() {

            var that = this;
            $.get('/user/loginInfo.do', function (data) {
              if (data != 0) {
                var obj = JSON.parse(data);
                that.islogin = 1;
                that.userinfo.name = obj.username;
                window.location.href = "/";
              }
            });
          },
          login() {
            that = this;
            $.post('/user/login.do', {user: that.form.user, pass: $.md5(that.form.pass)}, function (data) {
              if (data == 1) {
                that.$message({type: 'success', message: '登录成功'});
                setTimeout(function () {
                  window.location.reload();
                }, 3000);
              } else {
                that.$message({type: 'error', message: '账号或者密码错误'});
              }

            })
          }
          ,
          imgcode() {
            this.yzimg = "https://urp.tfswufe.edu.cn/cas/captcha.jpg?" + Date.parse(new Date());
          },
          exit() {
            that = this;
            $.get('/user/exit.do', function (data) {
              if (data == 1) {
                that.$message({message: '已退出'});
                setTimeout(function () {
                  window.location.reload();
                }, 1000);
              } else {
                that.$message({type: 'error', message: '退出失败'});
              }
            })
          }
          ,
          closeLoginPlane() {
            this.showLoginWindow = false;
          }
        }
      });


    </script>
</div>
</body>
</html>